<template>
    <div class="maxBox" @click="colseMsg">
        <headers class="headers"></headers>
        <div class="publicWidth90">
            <div style="padding-top: 30px;"></div>
            <div class="userInfoBox marginTop50">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="grid-content bg-purple sizeCenter flexFCC"
                            style="height: 200px;border-right: #8d7eaf 1px solid;">
                            <div class="">
                                <el-avatar :size="100" :src="datas.avatar"></el-avatar>
                                <div class="size20 colorFFF sizeCenter">
                                    {{ datas.name }}
                                    <img alt src="@/assets/image/vip-icon.png" srcset style="width: 50px;margin-left:10px"
                                        v-if="datas.is_vip" />
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="16">
                        <div class="grid-content bg-purple padding20">
                            <div class="flexSB" v-if="user_info" style="width: 330px;">
                                <div>
                                    <span class="size14 colorFFF">ID</span>
                                    <span class="size14 marginLeft10">{{ datas.id }}</span>
                                </div>
                                <div class="hand" @click.stop="onJump('/mine/fans')">
                                    <span class="size14 colorFFF ">粉丝</span>
                                    <span class="size14 marginLeft10">{{ datas.fans_count }}</span>
                                </div>
                                <div class="hand">
                                    <span class="size14 colorFFF " @click.stop="onJump('/attention')">关注</span>
                                    <span class="size14 marginLeft10">{{ datas.idol_count }}</span>
                                </div>
                                <div class="hand" @click.stop="toLike">
                                    <span class="size14 colorFFF ">喜欢</span>
                                    <span class="size14 marginLeft10">{{ datas.like_count }}</span>
                                </div>
                            </div>

                            <div>
                                <div class="flexFS colorFFF size16 marginTop20">
                                    <i class="el-icon-location-outline" style="font-size: 20px;"></i>
                                    <span class="marginLeft5">{{ datas.city?datas.city:"未填写" }}</span>
                                </div>
                            </div>

                            <div>
                                <div class="flexFST colorFFF size16 marginTop20">
                                    <img alt src="@/assets/mine/jianjie.png" srcset width="25px" height="25px" />
                                    <span class="marginLeft5">{{
                                        datas.subtitle ? datas.subtitle : '这个人很懒，什么都没有留下'
                                    }}</span>
                                </div>
                            </div>

                            <div style="width: 180px;" class="flexSB marginTop20" v-if="role != 'own'">
                                <div class="letter size12 sizeCenter hand" @click.stop="sendLetter">
                                    私信
                                </div>
                                <div class="flexFS colorfff size14  ">
                                    <div class="interest hand" v-if="!datas.attention_you"
                                        @click="attentionFun(datas.id, datas)">关注</div>
                                    <div v-else class="followed  hand" @click="cancelAttentionFun(datas.id, datas)">已关注
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <div class="" style="position: relative;">
                <div class="manageBox" v-if="role == 'own' && activeName != '2' && activeName != '3' && activeName != '4'">
                    <div v-if="type == 'views'" class="flexSB colorFFF hand" style="width: 60px; padding: 8px"
                        @click="manageFun">
                        <img src="@/assets/manage/manage.png" alt srcset width="20px" />
                        <span>管理</span>
                    </div>

                    <div v-else class="flexSB" :style="activeName == 0 ? 'width: 400px;' : 'width: 280px;'">
                        <div class="flexFS colorFFF hand" style="width: 60px; padding: 8px">
                            <el-checkbox v-model="allSelect" @change="allSelectFun"></el-checkbox>
                            <div style="margin-left: 5px;" class="hand" @click="allSelectFun(!allSelect)">全选</div>
                        </div>
                        <div class="flexFS colorFFF hand" style="width: 60px; padding: 8px"
                            @click="centerDialogVisible = true">
                            <img src="@/assets/manage/delete.png" alt srcset width="20px" />
                            <span style="margin-left: 5px;">删除</span>
                        </div>
                        <uploadAlbum v-if="activeName == 0" @addAlbumFun="addAlbum"></uploadAlbum>
                        <div @click="outManageFun" class="flexFS colorFFF hand" style="width: 90px; padding: 8px">
                            <img src="@/assets/manage/out-manage.png" alt srcset width="20px" />
                            <span style="margin-left: 5px;">退出管理</span>
                        </div>
                    </div>
                </div>
                <el-tabs @tab-click="handleClick" class="mt-20 colorFFF" v-model="activeName">
                    <el-tab-pane label="相册" name="0">
                        <userAlbum :user_id="datas.id" v-if="datas.id" ref="userAlbum" :key="timer"></userAlbum>
                    </el-tab-pane>
                    <el-tab-pane label="作品" name="1">
                        <creation :user_id="datas.id" v-if="datas.id" ref="creation" :key="timer"></creation>
                    </el-tab-pane>
                    <el-tab-pane label="服务" name="2">
                        <giveServiceTo :user_id="datas.id" v-if="datas.id" :key="timer"></giveServiceTo>
                    </el-tab-pane>
                    <el-tab-pane label="喜欢" name="3" v-if="role == 'own'">
                        <like :user_id="datas.id" v-if="datas.id" :key="timer"></like>
                    </el-tab-pane>
                    <el-tab-pane label="礼物" name="4" v-if="role == 'own'">
                        <gift :user_id="datas.id" v-if="datas.id" :key="timer"></gift>
                    </el-tab-pane>
                    <el-tab-pane label="播放记录" name="5" v-if="role == 'own'">
                        <playbackRecord :user_id="datas.id" v-if="datas.id" ref="playbackRecord" :key="timer">
                        </playbackRecord>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>

        <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%">
            <span>确定要删除选中的内容吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteFun()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
 
<script>
import headers from '@/Layout/headers/index'
import userAlbum from './user-album/index.vue'
import creation from './creation/index.vue'
import giveServiceTo from './give-service-to/index.vue'
import gift from './gift/index.vue'
import playbackRecord from './playback-record/index.vue'
import like from './like/index.vue'
import uploadAlbum from './user-album/upload-album.vue'

export default {
    components: {
        headers,
        userAlbum,
        creation,
        giveServiceTo,
        gift,
        playbackRecord,
        like,
        uploadAlbum,

    },
    computed: {
        user_info() {
            return this.$store.state.user.user
        },
    },
    watch: {
        '$route'(to, from) {
            // 监听路由参数的变化
            console.log('路由参数发生变化', to.query.role);
            // window.location.reload(); // 刷新页面

            if (this.$route.query.role) {
                this.role = this.$route.query.role
            }
            if (this.$route.query.user_id) {
                this.getUserInfo(this.$route.query.user_id)
            }

            if (this.$route.query.activeName) {
                this.activeName = this.$route.query.activeName
            }
            
        this.colseMsg()
        }
    },
    data() {
        return {
            submitComplete: false,
            centerDialogVisible: false,
            datas: {},
            activeName: 0,
            allSelect: false,
            type: 'views',
            role: 'user',//不是自己，只显示相册，作品，服务，没有编辑 own自己 user别人
            timer: ''
        }
    },
    mounted() {
        if (this.$route.query.role) {
            this.role = this.$route.query.role
        }

        if (this.$route.query.role == 'own') {
            document.title = '陪秀-个人中心'
        } else {
            document.title = '陪秀-用户中心'
        }
        if (this.$route.query.user_id) {
            this.getUserInfo(this.$route.query.user_id)
        } else {
            this.getUserInfo()

        }

        if (this.$route.query.activeName) {
            this.activeName = this.$route.query.activeName
        }
   
        if(this.$route.query.type){
            this.$nextTick(()=>{
             setTimeout(()=>{
                this.$refs.creation.select = 'long'
                    this.$refs.creation.query.creation_type = 'long'
             },2000)
            })
        }

        // console.log(1);//主
        // setTimeout(() => { //宏
        //     console.log(2);
        //     Promise.resolve().then(() => console.log(3)); //微
        //     setTimeout(() => console.log(4), 0); //宏
        // }, 0);
        // setTimeout(() => {//宏
        //     console.log(6);
        //     setTimeout(() => console.log(9), 0);//宏
        // }, 0);
        // setTimeout(() => {//宏
        //     console.log(7);
        // }, 0);
        // setTimeout(() => {//宏
        //     console.log(8);
        // }, 0);
        // console.log(5);//主

        // console.log(1,5,2,3,6,7,8,4,9)//主

    },
    methods: {
        colseMsg(){
            console.log('关闭')
            this.$store.dispatch('user/setLetterUser',{})
        },
        //重新加载子组件
        handleLoad() {
            this.timer = new Date().getTime()
        },

        sendLetter() {
            if (Object.keys(this.$store.state.user.user).length == 0) {
                this.$store.dispatch('system/showLogin')

                return
            } 
            if (Object.keys(this.$store.state.user.letterUser).length > 0) {
                this.$store.dispatch('user/setLetterUser', {})
            } else {
                this.$store.dispatch('user/setLetterUser', this.datas)
            }
        },
        onJump(url) {
            //  this.$router.push(url)
            if (this.role != 'own') {
                return
            }
            window.open(url, '_blank');
        },
        toLike() {
            if (this.role != 'own') {
                return
            }
            this.activeName = '3'
        },
        //查询用户信息
        getUserInfo(id = null) {
            this.$request.get('/auth/info', { id: id }).then((res) => {
                console.log('我是用户信息', res)
                this.datas = res
                this.handleLoad()
            })
        },
        handleClick(e) {
            //点击切换的时候关闭管理模式
            this.type = 'views'
            this.outManageFun()
        },

        addAlbum() {
            console.log('addAlbum')
            this.$refs.userAlbum.data = []
            this.$refs.userAlbum.init()
        },
        manageFun() {
            this.type = 'edit'
            switch (this.activeName) {
                case '0':
                    console.log('相冊')
                    this.$refs.userAlbum.type = 'edit'
                    break;
                case '1':
                    console.log('作品')
                    this.$refs.creation.manageFun()
                    break;
                case '2':
                    console.log('服务')
                    break;
                case '3':
                    console.log('喜欢')
                    break;
                case '4':
                    console.log('礼物')
                    break;
                case '5':
                    console.log('播放记录')
                    this.$refs.playbackRecord.type = 'edit'
                    break;
                default:
                // 当expression的值不匹配任何case时执行的代码
            }
        },
        deleteFun() {
            this.centerDialogVisible = false
            switch (this.activeName) {
                case '0':
                    console.log('相冊')
                    this.$refs.userAlbum.deleteAlbum()
                    // this.$refs.userAlbum.deleteAlbum()
                    break;
                case '1':
                    console.log('作品')
                    this.$refs.creation.deleteFun()
                    break;
                case '2':
                    console.log('服务')
                    break;
                case '3':
                    console.log('喜欢')
                    break;
                case '4':
                    console.log('礼物')
                    break;
                case '5':
                    console.log('播放记录')
                    this.$refs.playbackRecord.deleteBrowse()
                    break;
                default:
                // 当expression的值不匹配任何case时执行的代码
            }

        },


        outManageFun() {
            this.type = 'views'
            switch (this.activeName) {
                case '0':
                    console.log('相冊')
                    this.$refs.userAlbum.type = 'views'
                    break;
                case '1':
                    console.log('作品')
                    this.$refs.creation.outManageFun()
                    break;
                case '2':
                    console.log('服务')
                    break;
                case '3':
                    console.log('喜欢')
                    break;
                case '4':
                    console.log('礼物')
                    break;
                case '5':
                    console.log('播放记录')
                    this.$refs.playbackRecord.type = 'views'
                    break;
                default:
                // 当expression的值不匹配任何case时执行的代码
            }
        },
        allSelectFun(e) {
            console.log('jr,e=', e)
            this.allSelect = e

            switch (this.activeName) {
                case '0':
                    console.log('相冊')

                    if (this.allSelect) {
                        this.$refs.userAlbum.allSelect()
                    } else {
                        this.$refs.userAlbum.cancelAllSelect()
                    }
                    break;
                case '1':
                    console.log('作品')
                    this.$refs.creation.allSelectFun(this.allSelect)
                    break;
                case '5':
                    console.log('播放记录')
                    if (this.allSelect) {
                        this.$refs.playbackRecord.allSelect()
                    } else {
                        this.$refs.playbackRecord.cancelAllSelect()
                    }
                    break;
                default:
                // 当expression的值不匹配任何case时执行的代码
            }


        },
        attentionFun(id) {
            if (this.submitComplete) return
            this.submitComplete = true
            let that = this
            console.log(id)
            this.$request
                .post('/user-attention/create/' + id)
                .then((res) => {
                    this.submitComplete = false
                    that.datas.attention_you = 1
                    this.$message({
                        message: '关注成功',
                        type: 'success',
                        customClass: "messageClass"
                    })
                })
                .catch((error) => {
                    this.submitComplete = false
                })
        },
        //取消关注
        cancelAttentionFun(id) {
            if (this.submitComplete) return
            this.submitComplete = true
            this.$request
                .del('/user-attention/cancel/' + id)
                .then((res) => {
                    this.submitComplete = false
                    this.datas.attention_you = 0
                    this.$message({
                        message: '已取消',
                        type: 'success',
                        customClass: "messageClass"
                    })
                })
                .catch((error) => {
                    this.submitComplete = false
                })
        },
    },
    destroyed(){
            this.colseMsg()
    }
}
</script>
 
<style lang="scss" scoped>
.maxBox {
    width: 100vw;
    height: 100vh;
    background-color: #060316;
    overflow: auto;
}

.headers {}

.infoBox {
    width: 500px;
    margin: 0 auto;
    // background-color: aquamarine;
}

.userInfoBox {
    height: 200px;
    padding: 20px;
    background-image: radial-gradient(at 10% 50%, #a389d2, #140d37);
    color: #FFF;
}

.interest {
    width: 80px;
    background-color: #ff1c6d;
    color: #fff;
    height: 32px;
    line-height: 32px;
    border-radius: 50px;
    margin-left: 20px;
    text-align: center;
    font-size: 11px;
}

.followed {
    width: 80px;
    background-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
    height: 32px;
    line-height: 32px;
    text-align: center;
    margin-left: 20px;
    border-radius: 50px;
    font-size: 11px;
}

.letter {
    width: 80px;
    height: 32px;
    background: #7764a8;
    border-radius: 20px 20px 20px 20px;
    opacity: 1;
    line-height: 32px;
}

.manageBox {
    position: absolute;
    z-index: 999;
    right: 0;
    top: 0;
}

/deep/.el-tabs__nav.is-stretch {
    min-width: auto !important;
    width: 80%;
    margin-left: 10%;
}

/deep/.el-tabs__item {
    font-size: 17px !important;
    color: #c7c7c7 !important;
}

/deep/.el-tabs__item.is-active {
    color: #ffffff !important;
}

/deep/.el-tabs__active-bar {
    background-color: #ff1c6d !important;
}

/deep/.el-tabs__nav-wrap::after {
    background: #131313 !important;
    height: 1px !important;
}
</style>